<template>
	<view class="page">
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow" style="" >
					<view class="label">
						姓名:
					</view>
					<view  class="val" >
						{{name}}
					</view>
				</view>
				<view class="inputRow" style="">
					<view class="label">
						{{'离校方式'}}:
					</view>
					<view  class="val" >
						<u-radio-group
						   v-model="params.leaveMode"
						   placement="row"
						 >
						   <u-radio
						     :customStyle="{marginLeft: '8px'}"
						     :label="'家长接送'"
						     :name="1"
						    >
						   </u-radio>
							<u-radio
								:customStyle="{marginLeft: '8px'}"
								:label="'自行离校'"
								:name="2"
								>
							</u-radio>
						 </u-radio-group>
					</view>
				</view>
				
				<view class="inputRow">
					<view class="label">
						有效开始时间:
					</view>
					<view class="val">
						<uni-datetime-picker type="datetime" v-model="params.startDate" :placeholder="language.visitorForm.tip2" />
					</view>
				</view>
				<view class="inputRow">
						<view class="label">
							有效结束时间:
						</view>
						<view class="val">
							<uni-datetime-picker type="datetime" v-model="params.endDate" :placeholder="language.visitorForm.tip2" />
						</view>
				</view>
				<view class="inputRow" style="height: 300rpx;">
					<view class="label">
						{{'原因'}}:
					</view>
					<view  class="val" style="width: 70%;height: 300rpx;padding-top: 30rpx;" >
						<u--textarea v-model="params.reason" :placeholder="'请输入'"  ></u--textarea>
					</view>
				</view>
			</view>
			
			
		</view>
		<view class="submitBtn"  @click="handleSubmit">
			提交
		</view>
		<u-datetime-picker
		    :show="startDateShow" ref="datetimePicker" v-model="startDate" 
		    mode="dateTime"  @cancel="startDateShow=false" @confirm="startDateConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endDateShow" ref="datetimePicker" v-model="endDate" 
			mode="dateTime"  @cancel="endDateShow=false" @confirm="endDateConfirm"
	       ></u-datetime-picker>
	</view>
</template>

<script>
	import {acTemporaryGeneralAddApi} from '@/common/api/commonApi/safeApi.js'
	import scollerXTabel from '@/components/scollerXTabel.vue'
	export default {
		data() {
			return {
				list:[],
				name:'',
				params:{
					createBy: uni.getStorageSync('selectInfoAccount').name,
					createId: uni.getStorageSync('selectInfoAccount').id,
					personId :'',
					startDate : '',
					endDate : '',
					status: 1,
					generalClassify: 1,
					reason: '',
					leaveMode : 2
				},
				startDate: Number(new Date()),
				endDate: Number(new Date()),
				startDateShow : false,
				endDateShow : false,
				total : 0,
				isTeacher: 1,
			}
		},
		components:{
		},
		methods: {
			handleSubmit(){
				if(!this.params.startDate) return this.setMessage('请选择有效开始时间')
				if(!this.params.endDate) return this.setMessage('请选择有效结束时间')
				if(new Date(this.params.startDate) > new Date(this.params.endDate) ) return this.setMessage('开始时间不能大于结束时间')
				acTemporaryGeneralAddApi(this.params).then(res=>{
						this.setMessage('操作成功')
						setTimeout(()=>{
								this.goBack()
						},1500)
				})
			},
			handleDetail(item){
				this.goPage('/pages/componentsC/safe/accessRecordDetail',{id:1})
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.currPage ++
				this.getList()
			},
			goSearch(){
				if(this.params.startDate && this.params.endDate ){
					if(new Date(this.params.startDate) > new Date(this.params.endDate) ) return this.setMessage('开始时间不能大于结束时间')
				}
				this.params.currPage = 1 
				this.getList()
			},
			startDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.startDate = date
				console.log(this.params.startDate);
				this.startDateShow = false
			},
			endDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.endDate = date
				this.endDateShow = false
			},
			getList(){
				let params = this.params
				if(!params.endDate) delete params.endDate
				if(!params.startDate) delete params.startDate
				if(!params.transChannl) delete params.transChannl
				acAccessRecordApi(params).then(res=>{
					if(params.currPage==1) this.list = []
					this.list = this.list.concat(res.page.list)
					this.total = res.page.totalCount
				})
			},
			goSearch(){
				this.params.currPage = 1
				this.getList()
			}
			
		},
		onLoad() {
			this.name = this.$Route.query.name
			this.params.personId = this.$Route.query.id
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f1f1f1;
	// height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		// box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			flex: 1;
			padding-right: 30rpx;
			.inputRow{
				height: 120rpx;
				border-bottom: 1px solid #f1f1f1;
				height: 120rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				flex:1;
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	
	.submitBtn{
		margin: 40rpx;
		// width: 110rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	
}
</style>
